<template>
  <div class="app-container">
    <div>
      <el-form ref="form" :model="queryParams" label-width="80px" inline>
        <el-form-item label="部门名称" prop="name">
          <el-input v-model="queryParams.name" size="small"/>
        </el-form-item>

        <el-form-item label="状态" prop="status">
          <FormSelect size="small" clearable v-model="queryParams.status"/>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="addFormVisible = true" size="small">添加</el-button>
          <el-button type="primary" @click="getList" size="small">查询</el-button>
          <el-button type="primary" @click="resetForm('form')" size="small">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div>

      <el-table :data="tableData"
                row-key="id" border
                ref="table"
                :tree-props="{children: 'children',hasChildren:'hasChildren'}">
        <el-table-column label="部门名称" prop="name"></el-table-column>
        <el-table-column label="创建时间" prop="name"></el-table-column>
        <el-table-column label="修改时间" prop="name"></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status==1">正常</el-tag>
            <el-tag type="danger" v-else>失效</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
              <el-button size="small" type="text" @click="()=>{viewVisible=true;viewData = scope.row}">查看</el-button>
              <el-button size="small" type="text" @click="setEditData(scope.row)">编辑</el-button>
              <el-popconfirm
                confirm-button-text='好的'
                cancel-button-text='不用了'
                icon="el-icon-info"
                icon-color="red"
                @confirm="remove(scope.row)"
                title="确定删除吗？"
              >
                <el-button size="small" slot="reference" type="text">删除</el-button>
              </el-popconfirm>

          </template>
        </el-table-column>
      </el-table>

    </div>

    <!-- form  -->
    <el-dialog destroy-on-close title="添加" :visible.sync="addFormVisible"
               @close="()=>{this.resetForm('addForm')}">
      <el-form ref="addForm" label-width="80" :rules="addRules" :model="addFormData">
        <el-form-item label="上级部门" prop="parentId">
          <TreeSelect :data-source="listDept" ref="addDeptPicker" v-model="addFormData.parentId"   />
        </el-form-item>
        <el-form-item label="部门名称" prop="name">
          <el-input v-model="addFormData.name" size="small"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="createDept('addForm')">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog destroy-on-close title="修改"  :visible.sync="editFormVisible"
               @close="()=>{this.resetForm('editForm')}">
      <el-form ref="editForm" label-width="80" :rules="editRules" :model="editFormData">
        <el-form-item label="上级部门" prop="parentId">
          <TreeSelect :data-source="listDept" ref="editDeptPicker" v-model="editFormData.parentId"  />
        </el-form-item>
        <el-form-item label="部门名称" prop="name">
          <el-input v-model="editFormData.name" size="small"/>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <FormSelect  v-model="editFormData.status" />
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updateTDept('editForm')">确 定</el-button>
      </div>
    </el-dialog>


    <!--view-->
    <el-dialog :visible.sync="viewVisible" footer="">
      <el-descriptions border title="查看">
        <el-descriptions-item label="创建时间">{{viewData.createTime}}</el-descriptions-item>
        <el-descriptions-item label="修改时间">{{viewData.updateTime}}</el-descriptions-item>
        <el-descriptions-item label="部门名称">{{viewData.name}}</el-descriptions-item>
        <el-descriptions-item label="状态">{{viewData.status}}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>

  </div>
</template>

<script>
import {create, update, removeById, listDept} from "@/api/system/tDept";
import {formMixin} from "@/mixins/mixins";
import TreeSelect from '@/components/TreeSelect'
import FormSelect from "@/components/FormComponent/FormSelect";

export default {
  name: "TDepT",
  mixins: [formMixin],
  components:{TreeSelect,FormSelect},
  data() {
    return {
      tableLoading: false,
      tableData: [],
      queryParams: {
        name: '',
        status: null,
      },
      addFormVisible: false,
      editFormVisible: false,
      viewVisible: false,
      viewData: {
        id: '',
        createTime: '',
        updateTime: '',
        name: '',
        parentId: '',
        status: '',
      },
      addFormData: {
        name: '',
        parentId: '',
      },
      editFormData: {
        id: '',
        name: '',
        parentId: '',
        status: '',
      },
      addRules: {
        name: [{required: true}],
      },
      editRules: {
        name: [{required: true}],
        status: [{required: true}],
      },
    }
  },
  mounted() {
    this.getList();
  },
  methods: {
    listDept,
    getList() {
      this.tableLoading = true;
      listDept({...this.queryParams}).then(res => {
        this.tableData = res.data;
        this.tableLoading = false;
      })
    },
    setEditData(row) {
      Object.keys(this.editFormData).forEach(key => {
        this.editFormData[key] = row[key]
      })
      this.editFormVisible = true;
    },
    updateTDept(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          update(this.editFormData).then(res => {
            this.$notify['success']({
              title: res.message
            })
            this.getList();
            this.editFormVisible = false;
          })
        }
      });

    },
    createDept(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          create(this.addFormData).then(res => {
            this.$notify['success']({
              title: res.message
            })
            this.getList();
            this.addFormVisible = false;
          })
        }
      });
    },
    remove(row) {
      removeById(row.id).then(res => {
        this.$notify['success']({
          title: res.message
        })
        this.getList();
      })

    }


  }
}
</script>

<style scoped>

</style>
